<template>
  <div class="orderItem">
    <a-row type="flex" class="orderBody">
      <a-col span="1">
        <a-checkbox :checked="getCheckStatus(order.id)" @change="$emit('chooseOrder', order)"></a-checkbox>
        <div class="open" v-if="order.goods && order.goods.length > 1" @click.stop="is_open = !is_open">
          <span v-if="is_open">-</span>
          <span v-else>+</span>
        </div>
      </a-col>

      <template v-for="(item, index) in list_th">
        <a-col :key="item.type" :span="item.span" v-if="item.type == 'name'">
          <div class="goodsInfo" v-for="(good, goodIndex) in is_open ? order.goods : [order.goods[0]]" :key="goodIndex">
            <img :src="good.pic_url" alt="" />
            <div class="info">
              <a-tooltip style="width: 100%">
                <template slot="title"> {{ good.goods_name }}</template>
                <span class="goodName">{{ good.goods_name }}</span>
              </a-tooltip>
              <a-tooltip style="width: 100%" v-if="good.goods_attr">
                <template slot="title">
                  {{
                    good.goods_attr
                      ? good.goods_attr
                          .map(item => {
                            return item.attr_name
                          })
                          .join(' ')
                      : '规格:默认'
                  }}</template
                >
                <span class="attrName">{{
                  good.goods_attr
                    ? good.goods_attr
                        .map(item => {
                          return item.attr_name
                        })
                        .join(' ')
                    : '规格:默认'
                }}</span>
              </a-tooltip>
            </div>
          </div>
        </a-col>
        <a-col :key="index" :span="item.span" v-if="item.type == 'count'">
          <div class="count" v-for="(good, goodIndex) in is_open ? order.goods : [order.goods[0]]" :key="goodIndex">
            <div class="m-box">
              <span>×{{ good.goods_num }}</span>
            </div>
          </div>
        </a-col>
        <a-col :key="index" :span="item.span" v-if="item.type == 'created_at'">
          <div class="m-box">
            <span> {{ order.created_at }}</span>
          </div>
        </a-col>
        <a-col :key="index" :span="item.span" v-if="item.type == 'admin_name'">
          <div class="m-box">
            <a-tooltip style="width: 100%">
              <template slot="title"> {{ order.admin_name }}</template>
              <span class="goodName">{{ order.admin_name }}</span>
            </a-tooltip>
          </div>
        </a-col>
        <a-col :key="index" :span="item.span" v-if="item.type == 'supplier_name'">
          <div class="m-box">
            <a-tooltip style="width: 100%">
              <template slot="title">{{ order.supplier_name }}({{ order.supplier_tel }})</template>
              <span class="goodName">{{ order.supplier_name }}({{ order.supplier_tel }})</span>
            </a-tooltip>
          </div>
        </a-col>
        <a-col :key="index" :span="item.span" v-if="item.type == 'status'">
          <div class="m-box">
            <div class="orderStatus">
              <div class="status">
                <span :style="{ backgroundColor: orderStatus[1] }"></span>
                <span>{{ orderStatus[0] }}</span>
              </div>
            </div>
          </div>
        </a-col>
        <a-col :key="index" :span="item.span" v-if="item.type == 'action'">
          <div class="m-box">
            <a-button v-if="parseInt(order.status) === 1" type="link" @click="clickAction('2')">收货</a-button>
            <a-button v-if="parseInt(order.status) === 2" type="link" @click="clickAction('3')">已拣货</a-button>
            <!-- <a-button v-if="parseInt(order.status) === 1" type="link" @click="clickAction('2')">发货</a-button> -->

            <a-button v-if='parseInt(order.status) !== 1' type="link" @click="$emit('print', order,2)">分练单</a-button>
            <a-button v-if='parseInt(order.status) !== 2' type="link" @click="$emit('print', order,1)">对货单</a-button>
          </div>
        </a-col>
      </template>
    </a-row>
  </div>
</template>

<script>
export default {
  props: {
    order: {
      type: Object,
      default: () => {
        return {}
      }
    },
    choosed: {
      type: Boolean,
      default: false
    },
    list_th: {
      type: Array,
      default: () => {
        return []
      }
    },
    selectedRowKeys: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      is_open: false
    }
  },

  methods: {
    // 点击按钮
    clickAction(type) {
      this.$emit('triggerAction', { type, order: this.order })
    }
  },

  computed: {
    getCheckStatus() {
      return val => {
        return this.selectedRowKeys.findIndex(el => el.id === val) !== -1
      }
    },

    // statusColor() {
    //   let { status } = this.order
    //   if (status == 0) {
    //     return '#faad14'
    //   }

    //   if (status == 1 || status == 2) {
    //     return '#65c817'
    //   }
    // },

    orderStatus() {
      let { status } = this.order,
        str,
        color = '#65c817'
      switch (parseInt(status)) {
        case 0:
          str = '待处理'
          color = '#faad14'
          break

        case 1:
          str = '已发货'
          break

        case 2:
          str = '已收货'
          break

        case 3:
          str = '已拣货'
          break
      }

      return [str, color]
    }
  }
}
</script>

<style lang="less" scoped>
.orderItem {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.85);
}

.orderBody {
  display: flex;
  /* align-items: center; */
  padding: 16px;
  background-color: #fff;
  .open {
    margin-left: 10px;
    font-size: 20px;
    cursor: pointer;
    display: inline-block;
  }
  .goodsInfo {
    width: 100%;
    display: flex;
    align-items: center;
    margin-bottom: 17px;
    img {
      width: 48px;
      min-width: 48px;
      height: 48px;
      border-radius: 4px;
    }
    .info {
      flex: auto;
      display: flex;
      width: 0;
      flex-direction: column;
      margin-left: 24px;
      .goodName,
      .attrName {
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 14px;
      }
      .goodName {
        color: rgba(0, 0, 0, 0.85);
      }
      .attrName {
        color: rgba(0, 0, 0, 0.65);
      }
    }
  }
  .goodsInfo:last-child {
    margin-bottom: 0;
  }
  .count {
    display: flex;
    flex-direction: column;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.85);
    text:nth-child(1) {
      margin-bottom: 10px;
    }
    margin-bottom: 15px;
  }
  .count:last-child {
    margin-bottom: 0;
  }

  .orderStatus {
    .status {
      display: flex;
      align-items: center;
      font-size: 14px;
      color: rgba(0, 0, 0, 0.65);
      span:nth-child(1) {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        margin-right: 8px;
      }
    }
  }
}

.m-box {
  display: flex;
  align-items: center;
  height: 48px;
}
</style>
